<template>
    <div id="prize_main">
        <header>
            <div class="citytitle" @click="go('city_list')">
                <span class="cityName">{{city}}<i class="iconfont icon-xiala-copy"></i></span>
            </div>
            <div class="searchBox" @click="go('activity_search')">
                <i class="iconfont icon-sousuo"></i>
                <span>请输入关键词</span>
            </div>
            <div class="goWrapper">
                <i class="iconfont icon-dianpu" @click="go('shop_list')"></i>
				<i class="iconfont icon-mingpianxuanzhong05" @click="go('qrcode')"></i>
            </div>
        </header>
         <mu-tabs :value="activeTab" @change="handleTabChange" class="tabs">
            <mu-tab value="tab1" title="推荐"/>
            <mu-tab value="tab2" title="抽奖"/>
            <mu-tab value="tab3" title="团购"/>
            <mu-tab value="tab4" title="秒杀"/>
            <mu-tab value="tab5" title="推荐有礼"/>
        </mu-tabs>
        <activeList :receType="types"></activeList>
        <magicFooter></magicFooter>
    </div>
</template>
<script>
  import activeList from '../events/active_list'
  import getLocation from "services/get-location";
  import magicFooter from 'components/maFooter'
  export default {
    components: {
      magicFooter,
      activeList
    },
    data () {
      return {
          types:["lottery", "groupBuying", "seckill","recommend"],
          activeTab:'tab1',
          latitude: "0",
          longitude: "0",
          city:''
      }
    },
    created(){
        console.log(this.appName)
        this.city = this.$.nowCity
        this.getPosition();
    },
    methods:{
      handleTabChange (val) {
        this.activeTab = val
        console.log(this.activeTab)
        switch (val) {
            case 'tab1':
                this.types = ["lottery", "groupBuying", "seckill","recommend"];
                break;
            case 'tab2':
                this.types = ["lottery"];
                break;
            case 'tab3':
                this.types = ["groupBuying"];
                break;
            case 'tab4':
                this.types = ["seckill"];
                break;
                case 'tab5':
                this.types = ["recommend"];
                break;
        }
      },
      getPosition(){
        this.$.push("data_getLatLng", {}, res => {
            let vm = this;
            res = JSON.parse(res);
            getLocation.getAdd(res.latitude,res.longitude).then(res=>{
                vm.latitude = res[0].y
                vm.longitude = res[0].x
                getLocation.getCityName(res[0].y, res[0].x).then(res => {
                            let cityName = res.addressComponent.city;
                                if(this.$.nowCity === undefined){
                                    this.$.nowCity = cityName;
                                    this.city = cityName;
                                }
                                this.$.gpsCity = cityName;
                            getLocation.getCityId(cityName).then(res => {
                                if(this.$.chooseCity === undefined){
                                    this.$.chooseCity = res.cityId;
                                }
                            this.cityId = res.cityId;
                            this.$.gpsCityId
                    });
                });
            })
        });
      },
      go(params){
            this.$router.push({
                name:params
            })
      }
    }
  }
</script>
<style lang="scss">
header{
    width: 100vw;
    height: 46px;
    line-height: 46px;
    position: fixed;
    top:0;
    font-size: 16px;
    background-color:#f7f7f7;
    color: #666;
    display: flex;
    z-index:1000
}
#prize_main .tabs{
    position: fixed;
    width: 100vw;
    top:46px;
    z-index:1000;
    background-color:#fff!important;
}

header .citytitle{
    flex: 0 0 76px;
}
header .citytitle .cityName{
    display: inline-block;
    width: 86px;
    margin-left: 5px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
header .searchBox{
    flex: 1;
    position: relative;
}
header .searchBox i{
    position: absolute;
    color:#666;
    left: 10px;
    top:2px;
}
header .searchBox span{
    display: inline-block;
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius:10px;
    color:#666;
    background-color:rgba(0,0,0,.1);
}
header .goWrapper{
    flex: 0 0 70px;
    display: flex;
}
header .goWrapper i{
    flex: 1;
    font-size: 24px;
    text-align: center;
    color:#1a1a1a;
}
#prize_main .tabs {
    background-color: transparent;
    color: rgba(0, 0, 0, .87);
}
#prize_main .mu-tab-active {
    color: #FB8713;
}
#prize_main #active_list{
    padding-top: 92px;
}
#prize_main .empty{
    position: fixed;
    top:94px;
    width: 100%;
    height: calc(100vh - 194px)!important;
}
#prize_main .item .isStartWrapper {
    top: 50px;
  }
</style>
